<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="resources/css/amazeui.min.css"/>
    <link rel="stylesheet" href="resources/css/admin.css"/>

</head>
<body>
<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">仓库物品管理</strong><small></small></div>
    </div>

    <hr>

    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-3">
        </div>
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-input-group am-input-group-sm">
					<span class="am-input-group-btn">
						<form action="" method="post">
                            <label>
                                <input type="text" class="am-form-field"
                                       style="width: 100px; height: 36px;" id="searchGoodName">
                                <button class="am-btn am-btn-default" type="button" id="search">搜索</button>
                            </label>
						</form>
					</span>
            </div>
        </div>
    </div>
    <div class="am-g">
        <div class="am-u-sm-12">
            <form class="am-form">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr>
                        <th class="table-id">编号</th>
                        <th class="table-title">货物名称</th>
                        <th class="table-title">货物类型</th>
                        <th class="table-title">货物数量</th>
                        <th class="table-title">货物价格</th>
                        <th class="table-set">操作货物</th>
                    </tr>
                    </thead>

                    <tbody id="goodsTbody">
                    <tr>
                        <td> 待载入</td>
                        <td> 待载入</td>
                        <td> 待载入</td>
                        <td> 待载入</td>
                        <td> 待载入</td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <button class="am-btn am-btn-default am-btn-xs am-text-secondary">
                                        修改
                                    </button>
                                    <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only">
                                        入库
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <hr>
            </form>

            <div style="margin: auto; background: #d0e5f3" id="pagingBar"></div>

        </div>
    </div>
</div>
<!--    <a href="/getGoodsListAll"> test</a>-->

<script>

    function Good(goodId, goodName, type, count, cost) {
        this.goodId = goodId;
        this.name = goodName;
        this.type = type;
        this.count = count;
        this.cost = cost;
    }

    var goodsArr;
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "/getGoodsList", true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            goodsArr = JSON.parse(xhr.response);
            // goodsArr.length = Object.keys(goodsArr).length;
            // console.log(goodsArr.length);
            initGoodsList(goodsArr);
        }
    }

    let searchBtn = document.getElementById("search");
    searchBtn.onclick = function () {
        let goodname = document.getElementById("searchGoodName").value;
        let xhr = new XMLHttpRequest();
        // console.log(goodname);
        let pagingBar = document.getElementById("pagingBar");
        pagingBar.innerHTML = null;

        xhr.open("GET", "/getGoodsList?goodname=" + goodname, true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                goodsArr = JSON.parse(xhr.response);
                // goodsArr.length = Object.keys(goodsArr).length;
                // console.log(goodsArr.length);
                initGoodsList(goodsArr);
            }
        }
    }

    function initGoodsList(goodsList) {
        var pageSize = 9;
        var pageCount = goodsArr.length / pageSize + 1;
        var pagingBar = document.getElementById("pagingBar");
        for (let i = 1; i <= pageCount; i++) {
            let btn = document.createElement("button");
            let font = document.createElement("font");
            btn.innerHTML = i;
            btn.name = "page";
            btn.style.margin = "auto";
            btn.style.background = "#EFEFEF";
            btn.style.border = "0";
            btn.onclick = function () {
                let pages = document.getElementsByName("page");
                let thisPage = this.innerHTML;

                for (let j = 0; j < pages.length; j++) {
                    pages[j].style.background = "#EFEFEF";
                }
                this.style.background = "#d0e5f3";

                showGoodList(goodsArr, thisPage, pageSize);
            }


            pagingBar.appendChild(btn);
            showGoodList(goodsArr, 1, pageSize);
        }
    }

    function showGoodList(goodsArr, page, pageSize) {
        let index = (page - 1) * pageSize;
        // console.log(index);
        let tbody = document.getElementById("goodsTbody");
        tbody.innerHTML = null;
        for (let i = 0; i < pageSize && index < goodsArr.length; i++) {
            let good = goodsArr[index++];
            let tr = document.createElement("tr");
            let tdId = document.createElement("td");
            let tdName = document.createElement("td");
            let tdType = document.createElement("td");
            let tdCount = document.createElement("td");
            let tdPrice = document.createElement("td");
            let tdOperator = document.createElement("td");
            let adjust = document.createElement("button");
            let input = document.createElement("button");
            adjust.type = "button";
            adjust.className = "am-btn am-btn-default am-btn-xs am-text-secondary";
            adjust.innerText = "修改";
            adjust.id = "adjust" + good.goodId;
            // adjust.name = good.goodName;
            // let aAdjust = document.createElement("a");
            // aAdjust.innerText = "修改";
            // aAdjust.href = "../updateGood.jsp?goodid="+good.goodId;
            // adjust.appendChild(aAdjust);

            /*弹出窗体设计*/
            let inputDiv = document.createElement("div");
            /*设计窗体*/
            /*设计窗体位置*/
            // inputDiv.innerText = "TESTSTSTSTSTTS";
            inputDiv.style.width = "500px";
            inputDiv.style.height = "400px";
            // inputDiv.style.position = "fixed";
            // inputDiv.className = "am-form-group";
            inputDiv.style.position = "absolute";
            inputDiv.style.left = "25%";
            inputDiv.style.right = "65%";
            inputDiv.style.top = "15%";
            inputDiv.style.bottom = "85%";
            inputDiv.style.background = "white";
            inputDiv.style.display = "none";
            inputDiv.style.border = "3px solid black";
            document.body.appendChild(inputDiv);

            /*设计窗体内元素*/
            let closeBtn1 = document.createElement("button");
            closeBtn1.type = "button";
            closeBtn1.innerText = "X";
            // closeBtn1.style.color = "red";
            closeBtn1.style.border = "0px";
            closeBtn1.style.position = "absolute";
            closeBtn1.style.right = "0%";
            closeBtn1.style.top = "0%";
            closeBtn1.onclick = function () {
                inputDiv.style.display = "none";
            }
            inputDiv.appendChild(closeBtn1);

            let titleH3 = document.createElement("h3");
            titleH3.style.position = "relative";
            titleH3.style.left = "30%";
            titleH3.style.top = "5%";
            titleH3.innerText = "输入你要修改的" + good.goodName + "的信息";
            inputDiv.appendChild(titleH3);

            let nameInput = document.createElement("input");
            nameInput.type = "text";
            nameInput.placeholder = "货物名称";
            nameInput.value = good.goodName;
            nameInput.style.position = "relative";
            nameInput.style.top = "5%";
            nameInput.style.left = "30%";
            nameInput.style.height = "40px";
            nameInput.style.width = "210px";
            nameInput.style.display = "block";
            inputDiv.appendChild(nameInput);

            let typeInput = document.createElement("input");
            typeInput.type = "text";
            typeInput.placeholder = "货物类型";
            typeInput.value = good.type;
            typeInput.style.position = "relative";
            typeInput.style.top = "10%";
            typeInput.style.left = "30%";
            typeInput.style.height = "40px";
            typeInput.style.width = "210px";
            typeInput.style.display = "block";
            inputDiv.appendChild(typeInput);

            let countInput = document.createElement("input");
            countInput.type = "text";
            countInput.placeholder = "货物数量";
            countInput.value = good.count;
            countInput.style.position = "relative";
            countInput.style.top = "15%";
            countInput.style.left = "30%";
            countInput.style.height = "40px";
            countInput.style.width = "210px";
            countInput.style.display = "block";
            inputDiv.appendChild(countInput);

            let costInput = document.createElement("input");
            costInput.type = "text";
            costInput.placeholder = "货物价格";
            costInput.value = good.cost;
            costInput.style.position = "relative";
            costInput.style.top = "20%";
            costInput.style.left = "30%";
            costInput.style.height = "40px";
            costInput.style.width = "210px";
            costInput.style.display = "block";
            inputDiv.appendChild(costInput);

            let adjustButton = document.createElement("button");
            adjustButton.className = "am-btn am-btn-sucess";
            adjustButton.style.position = "relative";
            adjustButton.style.top = "30%";
            adjustButton.style.left = "45%";
            adjustButton.style.display = "block";
            adjustButton.innerText = "修改";
            adjustButton.onclick = function () {
                inputDiv.style.display = "none";

                // adjustGood = new Good(nameInput.value,typeInput.value,countInput.value,costInput.value);
                let xhr2 = new XMLHttpRequest();
                // xhr2.open("POST",'/updateGood',true);
                let updateGoodUrl = "/updateGood?name=" + nameInput.value + "&type=" + typeInput.value + "&count=" + countInput.value + "&cost=" + costInput.value + "&id=" + good.goodId;
                // xhr2.open("GET",'/updateGood?newGood='+JSON.stringify(adjustGood),true);
                xhr2.open("GET", updateGoodUrl, true);
                // let data = new FormData();
                // data.append("newGood",JSON.stringify(adjustGood));
                // xhr2.send(data);
                xhr2.send();

                location.reload();
            }
            inputDiv.appendChild(adjustButton);

            /*  添加按钮的监听事件*/
            adjust.onclick = function () {
                // alert(this.id);
                /*添加弹窗输入, 显示弹窗*/
                inputDiv.style.display = "block";
            }

            // 注意：这个input是入库按钮，命名问题，命名太模糊了
            input.className = "am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only";
            input.innerText = "入库";
            // input.name = good.goodName;
            // let aPut = document.createElement("a");
            // aPut.innerText = "入库";
            // aPut.href = "../putStorage.jsp?goodid="+good.goodId;
            // input.appendChild(aPut);

            /*设计入库的窗体*/
            let inputDiv2 = document.createElement("div");
            inputDiv2.style.width = "500px";
            inputDiv2.style.height = "200px";
            inputDiv2.style.position = "absolute";
            inputDiv2.style.left = "20%";
            inputDiv2.style.top = "15%"
            inputDiv2.style.background = "white";
            inputDiv2.style.display = "none";
            inputDiv2.style.border = "3px solid black";
            document.body.appendChild(inputDiv2);

            let closeBtn2 = document.createElement("button");
            closeBtn2.type = "button";
            closeBtn2.innerText = "X";
            // closeBtn2.style.color = "red";
            closeBtn2.style.border = "0px";
            closeBtn2.style.position = "absolute";
            closeBtn2.style.right = "0%";
            closeBtn2.style.top = "0%";
            closeBtn2.onclick = function () {
                inputDiv2.style.display = "none";
            }
            inputDiv2.appendChild(closeBtn2);

            // 标题
            let titleH = document.createElement("h3");
            titleH.style.position = "relative";
            titleH.style.left = "30%"
            titleH.style.top = "5%";
            titleH.innerText = "输入你要将" + good.goodName + "放入的是哪个仓库："
            inputDiv2.appendChild(titleH);

            // 添加输入框
            let warehouseIdInput = document.createElement("input");
            warehouseIdInput.type = "text";
            warehouseIdInput.placeholder = "仓库编号";
            warehouseIdInput.style.position = "relative";
            warehouseIdInput.style.top = "10%";
            warehouseIdInput.style.left = "30%";
            warehouseIdInput.style.height = "40px";
            warehouseIdInput.style.width = "210px";
            warehouseIdInput.style.display = "block";
            inputDiv2.appendChild(warehouseIdInput);

            // 添加入库按钮
            let putWarehouseBtn = document.createElement("button");
            putWarehouseBtn.className = "am-btn am-btn-sucess";
            putWarehouseBtn.style.position = "relative";
            putWarehouseBtn.style.top = "20%";
            putWarehouseBtn.style.left = "45%";
            putWarehouseBtn.style.display = "block";
            putWarehouseBtn.innerText = "入库";
            putWarehouseBtn.onclick = function () {
                inputDiv2.style.display = "none";

                if (warehouseIdInput.value != null) {
                    let xhr3 = new XMLHttpRequest();
                    let putStorageUrl = "/putStorage?goodId=" + good.goodId + "&warehouseId=" + warehouseIdInput.value;
                    xhr3.open("GET", putStorageUrl, true);
                    xhr3.send();
                    location.reload();
                }
            }
            inputDiv2.appendChild(putWarehouseBtn);
            // 弹窗设计完成

            //  添加按钮监听，当点击"入库",将该div显示
            input.type = "button";
            input.onclick = function () {
                // alert("Test Input");
                inputDiv2.style.display = "block";
            }


            tdId.innerHTML = good.goodId;
            tdName.innerHTML = good.goodName;
            tdType.innerHTML = good.type;
            tdCount.innerHTML = good.count;
            tdPrice.innerHTML = good.cost;
            tdOperator.appendChild(adjust);
            tdOperator.appendChild(input);

            tr.appendChild(tdId);
            tr.appendChild(tdName);
            tr.appendChild(tdType);
            tr.appendChild(tdCount);
            tr.appendChild(tdPrice);
            tr.appendChild(tdOperator);
            tbody.appendChild(tr);
        }
    }


</script>
</body>
</html>
